<template>
    <div class="com_box flexbox flexcolumn over_box height_100">
        <ChoiceShop />
        <AddAdverPlan />
        <div class="create_head flexbox flexcenter flexbetween">
            <img src="../../assets/img/step_icon2.svg" alt="">
            <div class="create_cal flexbox flexcenter" v-if="dataForm.createform.type==1">
                <div class="cal_item">
                    <div class="cal_num">{{dataForm.tableData.length}}</div>
                    <div class="cal_text">抖音号</div>
                </div>
                <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                <div class="cal_item">
                    <div class="cal_num">{{maxLength}}</div>
                    <div class="cal_text">智能匹配</div>
                </div>
                <template v-if="dataForm.market=='VIDEO_PROM_GOODS' || dataForm.createform.creative_way=='VIDEO'">
                    <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                    <div class="cal_item">
                        <div class="cal_num">{{dataForm.createform.creatinfo_list.length}}</div>
                        <div class="cal_text">创意组</div>
                    </div>
                </template>
                <img src="../../assets/img/sybol_e.svg" alt="" class="sybol_img">
                <div class="cal_item">
                    <div class="cal_num" v-if="dataForm.market=='VIDEO_PROM_GOODS' || dataForm.createform.creative_way=='VIDEO'">{{dataForm.tableData.length*maxLength*dataForm.createform.creatinfo_list.length}}</div>
                    <div class="cal_num" v-else>{{dataForm.tableData.length*maxLength}}</div>
                    <div class="cal_text">计划总数</div>
                </div>
            </div>
            <div class="create_cal flexbox flexcenter" v-else>
                <div class="cal_item">
                    <div class="cal_num">{{dataForm.tableData.length}}</div>
                    <div class="cal_text">抖音号</div>
                </div>
                <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                <div class="cal_item">
                    <div class="cal_num">{{dataForm.createform.budget_list.length}}</div>
                    <div class="cal_text">预算</div>
                </div>
                <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                <div class="cal_item">
                    <div class="cal_num">{{dataForm.createform.audience_list.length}}</div>
                    <div class="cal_text">定向</div>
                </div>
                <template v-if="dataForm.extension=='STANDARD'">
                    <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                    <div class="cal_item">
                        <div class="cal_num">{{dataForm.createform.industry_list.length}}</div>
                        <div class="cal_text">创意分类</div>
                    </div>
                </template>
                <template v-if="dataForm.market=='VIDEO_PROM_GOODS' || dataForm.createform.creative_way=='VIDEO' || dataForm.createform.creative_way.includes('VIDEO')">
                    <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                    <div class="cal_item">
                        <div class="cal_num">{{dataForm.createform.creatinfo_list.length}}</div>
                        <div class="cal_text">创意组</div>
                    </div>
                </template>
                <template v-if="dataForm.createform.creative_material_mode=='PROGRAMMATIC_CREATIVE'">
                    <img src="../../assets/img/sybol_x.svg" alt="" class="sybol_img">
                    <div class="cal_item">
                        <div class="cal_num">{{dataForm.createform.creattitle_list.length}}</div>
                        <div class="cal_text">标题组</div>
                    </div>
                </template>
                <img src="../../assets/img/sybol_e.svg" alt="" class="sybol_img">
                <div class="cal_item">
                    <!-- <div class="cal_num" v-if="dataForm.market=='VIDEO_PROM_GOODS' || dataForm.createform.creative_way=='VIDEO'">
                        <template v-if="dataForm.createform.creative_material_mode=='CUSTOM_CREATIVE'">
                            {{dataForm.tableData.length*dataForm.createform.budget_list.length*dataForm.createform.audience_list.length*dataForm.createform.industry_list.length*dataForm.createform.creatinfo_list.length}}
                        </template>
                        <template v-else-if="dataForm.createform.creative_material_mode=='PROGRAMMATIC_CREATIVE'">
                            {{dataForm.tableData.length*dataForm.createform.budget_list.length*dataForm.createform.audience_list.length*dataForm.createform.industry_list.length*dataForm.createform.creatinfo_list.length*dataForm.createform.creattitle_list.length}}
                        </template>
                    </div>
                    <div class="cal_num" v-else>{{dataForm.tableData.length*dataForm.createform.budget_list.length*dataForm.createform.audience_list.length*dataForm.createform.industry_list.length}}</div> -->
                    <div class="cal_num">{{allLength}}</div>
                    <div class="cal_text">计划总数</div>
                </div>
            </div>
        </div>
        <div class="adver_box flex">
            <el-table :data="dataForm.tableData" class="com_table adver_table">
                <el-table-column prop="full_name" label="广告账户">
                    <template slot-scope="scope">
                        <el-dropdown class="adver_drop" trigger="click" placement='bottom-start' @visible-change="clearQuery($event,scope.$index,'searchAdver')">
                            <div class="base_box flexbox flexcenter flexbetween">
                                <div v-if="scope.row.hasAdver.advertiser_id" class="min_box">
                                    <div class="base_name">{{scope.row.hasAdver.name}}</div>
                                    <div class="base_id">ID：{{scope.row.hasAdver.advertiser_id}}</div>
                                </div>
                                <div class="base_text" v-else>请选择账户</div>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="adver_menu">
                                    <el-input placeholder="请输入抖音号名称/ID搜索" size="small" prefix-icon="el-icon-search" v-model="scope.row.searchAdver" clearable>
                                    </el-input>
                                    <div class="adver_list">
                                        <el-dropdown-item class="adver_dropdown" v-for="(item,index) in filteredData(scope.row.searchAdver,adverList,'advertiser_id','name')" :key="index">
                                            <div class="adver_item" :class="{active:scope.row.hasAdver.advertiser_id==item.advertiser_id}" @click="selectAdver(scope.$index,item)">
                                                <img src="../../assets/img/market_checked.svg" alt="" class="adver_check">
                                                <div class="flexbox flexcolumn flexjust adver_content">
                                                    <div class="adver_name">{{item.name}}</div>
                                                    <div class="adver_id">ID：{{item.advertiser_id}}</div>
                                                </div>
                                            </div>
                                        </el-dropdown-item>
                                    </div>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </template>
                </el-table-column>
                <el-table-column prop="full_name" label="广告组">
                    <template slot-scope="scope">
                        <el-dropdown class="adver_drop" trigger="click" placement='bottom-start' @visible-change="clearQuery($event,scope.$index,'searchGroup')" v-if="scope.row.hasAdver.advertiser_id">
                            <div class="base_box flexbox flexcenter flexbetween">
                                <div v-if="scope.row.hasGroup.id" class="min_box">
                                    <div class="base_name">{{scope.row.hasGroup.name}}</div>
                                    <div class="base_id">ID：{{scope.row.hasGroup.id}}</div>
                                </div>
                                <div class="base_text" v-else>请选择账户</div>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="adver_menu">
                                    <div class="flexbox flexcenter flexbetween">
                                        <el-input placeholder="请输入抖音号名称/ID搜索" style="width:250px" size="small" prefix-icon="el-icon-search" v-model="scope.row.searchGroup" clearable>
                                        </el-input>
                                        <el-link icon="el-icon-circle-plus-outline" type="primary" :underline="false" @click="addAdverPlan(scope.row.hasAdver.advertiser_id,scope.$index)">新建广告组</el-link>
                                    </div>
                                    <div class="adver_list">
                                        <el-dropdown-item class="adver_dropdown" v-for="(item,index) in filteredData(scope.row.searchGroup,scope.row.groupList,'id','name')" :key="index">
                                            <div class="adver_item" :class="{active:scope.row.hasGroup.id==item.id}" @click="selectGroup(scope.$index,item)">
                                                <img src="../../assets/img/market_checked.svg" alt="" class="adver_check">
                                                <div class="adver_content flexbox flexcenter flexbetween">
                                                    <div>
                                                        <div class="adver_name">{{item.name}}</div>
                                                        <div class="adver_id">ID：{{item.id}}</div>
                                                    </div>
                                                    <!-- <span class="adver_status">已暂停</span> -->
                                                </div>
                                            </div>
                                        </el-dropdown-item>
                                    </div>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="base_box adver_disabled flexbox flexcenter flexbetween" v-else>
                            <div class="base_text">请选择账户</div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="full_name" label="抖音号">
                    <template slot-scope="scope">
                        <el-dropdown class="adver_drop" trigger="click" placement='bottom-start' @visible-change="clearQuery($event,scope.$index,'searchAnchor')" v-if="scope.row.hasAdver.advertiser_id">
                            <div class="base_box flexbox flexcenter flexbetween">
                                <div v-if="scope.row.hasAchor.aweme_id" class="flexbox flexcenter min_box">
                                    <img :src="scope.row.hasAchor.aweme_avatar" alt="" class="anchor_img">
                                    <div class="anchor_info">
                                        <div class="base_name">{{scope.row.hasAchor.aweme_name}}</div>
                                        <div class="base_id">ID：{{scope.row.hasAchor.aweme_show_id}}</div>
                                    </div>
                                    <el-tag size="mini" style="margin-left:10px">{{scope.row.hasAchor.type}}</el-tag>
                                </div>
                                <div class="base_text" v-else>请选择账户</div>
                                <span class="el-icon-caret-bottom"></span>
                            </div>
                            <el-dropdown-menu slot="dropdown">
                                <div class="adver_menu">
                                    <el-input placeholder="请输入抖音号名称/ID搜索" size="small" prefix-icon="el-icon-search" v-model="scope.row.searchAnchor" clearable>
                                    </el-input>
                                    <div class="adver_list">
                                        <el-dropdown-item class="adver_dropdown" v-for="(item,index) in filteredData(scope.row.searchAnchor,scope.row.anchorList,'aweme_show_id','aweme_name')" :key="index">
                                            <div class="adver_item" :class="{active:scope.row.hasAchor.aweme_id==item.aweme_id}" @click="selectAchor(scope.$index,item)">
                                                <img src="../../assets/img/market_checked.svg" alt="" class="adver_check">
                                                <div class="adver_content flexbox flexcenter">
                                                    <img :src="item.aweme_avatar" alt="" class="anchor_img">
                                                    <div class="anchor_info">
                                                        <div class="adver_name">{{item.aweme_name}}</div>
                                                        <div class="adver_id">ID：{{item.aweme_show_id}}</div>
                                                    </div>
                                                    <el-tag size="mini" style="margin-left:10px">{{item.type}}</el-tag>
                                                </div>
                                            </div>
                                        </el-dropdown-item>
                                    </div>
                                </div>
                            </el-dropdown-menu>
                        </el-dropdown>
                        <div class="base_box adver_disabled flexbox flexcenter flexbetween" v-else>
                            <div class="base_text">请选择账户</div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="full_name" label="商品" v-if="dataForm.market=='VIDEO_PROM_GOODS'">
                    <template slot-scope="scope">
                        <div class="base_box flexbox flexcenter flexbetween" v-if="scope.row.hasAdver.advertiser_id" @click="choiceShop(scope.$index,scope.row)">
                            <div v-if="scope.row.hasShop.product_id" class="flexbox flexcenter min_box">
                                <img :src="scope.row.hasShop.img" alt="" class="shop_img">
                                <div class="anchor_info">
                                    <div class="base_name">{{scope.row.hasShop.product_name}}</div>
                                    <div class="base_id">ID：{{scope.row.hasShop.product_id}}</div>
                                </div>
                            </div>
                            <template v-else>
                                <div class="base_text flexbox flexcenter">
                                    <span class="add_shop el-icon-circle-plus-outline"></span>
                                    点击添加商品
                                </div>
                                <span class="el-icon-caret-bottom"></span>
                            </template>
                        </div>
                        <div class="base_box adver_disabled flexbox flexcenter flexbetween" v-else>
                            <div class="base_text flexbox flexcenter"> <span class="add_shop el-icon-circle-plus-outline"></span> 点击添加商品</div>
                            <span class="el-icon-caret-bottom"></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="product_num" label="操作" width="90" align="center">
                    <template slot-scope="scope">
                        <el-link type="danger" :underline="false" @click="deletList(scope.$index)">删除</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div class="add_list" @click="addList">
                <span class="el-icon-circle-plus-outline" style="margin-right:5px"></span>
                添加账户
            </div>
        </div>
        <div class="create_footer">
            <el-button plain class="el-button-width plain_red" size="small" @click="cancelCreation">取消创建</el-button>
            <el-button plain class="el-button-width" size="small" @click="preStep">上一步</el-button>
            <el-button type="primary" class="el-button-width" size="small" @click="nextTwo">下一步</el-button>
        </div>
    </div>
</template>

<script>
import ChoiceShop from "./ChoiceShop";
import AddAdverPlan from "./AddAdverPlan";
export default {
    props: ["dataForm"],
    name: "",
    data() {
        return {
            adverList: [],
        };
    },
    created() {
        if (this.dataForm.tableData.length > 0) {
            for (let i in this.dataForm.tableData) {
                if (
                    JSON.stringify(this.dataForm.tableData[i].hasAdver) != "{}"
                ) {
                    this.reloadGroud(
                        this.dataForm.tableData[i].hasAdver.advertiser_id,
                        i
                    );
                    this.reloadAchor(
                        this.dataForm.tableData[i].hasAdver.advertiser_id,
                        i
                    );
                }
            }
        }
        this.getAdverList();
    },
    computed: {
        // 智能计划取最大值
        maxLength() {
            let arr = [];
            if (this.dataForm.createform.type == 1) {
                if (
                    this.dataForm.market == "VIDEO_PROM_GOODS" ||
                    this.dataForm.createform.creative_way == "VIDEO"
                ) {
                    if (
                        this.dataForm.createform.creative_material_mode ==
                        "CUSTOM_CREATIVE"
                    ) {
                        arr = [
                            this.dataForm.createform.budget_list.length,
                            this.dataForm.createform.audience_list.length,
                            this.dataForm.createform.industry_list.length,
                        ];
                    } else {
                        arr = [
                            this.dataForm.createform.budget_list.length,
                            this.dataForm.createform.audience_list.length,
                            this.dataForm.createform.industry_list.length,
                            this.dataForm.createform.creattitle_list.length,
                        ];
                    }
                } else {
                    if (
                        this.dataForm.createform.creative_material_mode ==
                        "CUSTOM_CREATIVE"
                    ) {
                        arr = [
                            this.dataForm.createform.budget_list.length,
                            this.dataForm.createform.audience_list.length,
                            this.dataForm.createform.industry_list.length,
                        ];
                    } else {
                        arr = [
                            this.dataForm.createform.budget_list.length,
                            this.dataForm.createform.audience_list.length,
                            this.dataForm.createform.industry_list.length,
                            this.dataForm.createform.creattitle_list.length,
                        ];
                    }
                }
            }
            return Math.max(...arr);
        },

        // 智能计划取最大值
        allLength() {
            let arr = 0;
            let tb_num = this.dataForm.tableData.length
            let bd_num = this.dataForm.createform.budget_list.length
            let ad_num = this.dataForm.createform.audience_list.length
            let in_num = this.dataForm.createform.industry_list.length
            let cy_num = this.dataForm.createform.creatinfo_list.length
            let tt_num = this.dataForm.createform.creattitle_list.length
            if(this.dataForm.market=='VIDEO_PROM_GOODS' || this.dataForm.createform.creative_way=='VIDEO'){
                if(this.dataForm.createform.creative_material_mode=='CUSTOM_CREATIVE'){
                    arr = tb_num*bd_num*ad_num*in_num*cy_num
                }else if(this.dataForm.createform.creative_material_mode=='PROGRAMMATIC_CREATIVE'){
                    arr = tb_num*bd_num*ad_num*in_num*cy_num*tt_num
                }
            }else{
                if(this.dataForm.createform.creative_material_mode=='CUSTOM_CREATIVE'){
                    arr = tb_num*bd_num*ad_num*in_num*cy_num
                }else if(this.dataForm.createform.creative_material_mode=='PROGRAMMATIC_CREATIVE'){
                    if(this.dataForm.createform.creative_way.includes('VIDEO')){
                        arr = tb_num*bd_num*ad_num*in_num*cy_num*tt_num
                    }else{
                        arr = tb_num*bd_num*ad_num*in_num*tt_num
                    }
                    
                }
            }
            return arr
        },
    },
    methods: {
        // 提交
        nextTwo() {
            let list = this.dataForm.tableData;
            let flag = false;
            let is_talent = false;
            if (this.dataForm.market == "VIDEO_PROM_GOODS") {
                for (let i in list) {
                    if (
                        !list[i].hasAdver.advertiser_id ||
                        !list[i].hasGroup.id ||
                        !list[i].hasAchor.aweme_id ||
                        !list[i].hasShop.product_id
                    ) {
                        flag = true;
                        break;
                    }
                }
            } else if (this.dataForm.market == "LIVE_PROM_GOODS") {
                for (let i in list) {
                    if (
                        !list[i].hasAdver.advertiser_id ||
                        !list[i].hasGroup.id ||
                        !list[i].hasAchor.aweme_id
                    ) {
                        flag = true;
                        break;
                    }
                }
            }

            for (let i in list) {
                if (list[i].hasAchor.is_talent) {
                    is_talent = true;
                    break;
                }
            }
            this.dataForm.is_talent = is_talent;
            if (flag) {
                this.$message.error("请完善列表信息！");
                return;
            } else {
                this.dataForm.step = 3;
                this.dataForm.isChange = true;
                this.sessionSave();
            }
        },

        // 添加广告组
        addAdverPlan(id, index) {
            const attr = {
                marketing_goal: this.dataForm.market,
                advertiser_id: id,
                index: index,
                dialogVsb: true,
            };
            this.$bus.emit("addAdverPlan", attr);
        },

        //获取广告账户列表
        async getAdverList() {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/advertiser_list"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.adverList = res.data;
            }
        },

        //获取广告组列表
        async getGroupList(id, index) {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/group_list",
                {
                    advertiser_id: id,
                    marketing_goal: this.dataForm.market,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.dataForm.tableData[index].groupList = res.data;
                if (res.data.length > 0) {
                    this.dataForm.tableData[index].hasGroup = res.data[0];
                } else {
                    this.dataForm.tableData[index].hasGroup = {};
                }
                this.sessionSave();
            }
        },

        // 重新加载广告组
        async reloadGroud(id, index) {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/group_list",
                {
                    advertiser_id: id,
                    marketing_goal: this.dataForm.market,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.dataForm.tableData[index].groupList = res.data;
                this.sessionSave();
            }
        },

        //获取抖音号
        async getAchorList(id, index) {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_awemeauthor",
                {
                    advertiser_id: id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data) {
                    let type = res.data[i].bind_type[0];
                    if (type == "OFFICIAL") {
                        res.data[i].type = "官方";
                        res.data[i].is_talent = false;
                    } else if (type == "SELF") {
                        res.data[i].type = "自运营";
                        res.data[i].is_talent = false;
                    } else if (type == "AWEME_COOPERATOR") {
                        res.data[i].type = "合作达人";
                        res.data[i].is_talent = true;
                    } else if (type == "DOU_SHOP_LIVE_SELF") {
                        res.data[i].type = "抖店自播";
                        res.data[i].is_talent = true;
                    }
                }
                this.dataForm.tableData[index].anchorList = res.data;
                if (res.data.length > 0) {
                    this.dataForm.tableData[index].hasAchor = res.data[0];
                } else {
                    this.dataForm.tableData[index].hasAchor = {};
                }
                this.sessionSave();
            }
        },

        //重新获取抖音号
        async reloadAchor(id, index) {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/get_awemeauthor",
                {
                    advertiser_id: id,
                }
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                for (let i in res.data) {
                    let type = res.data[i].bind_type[0];
                    if (type == "OFFICIAL") {
                        res.data[i].type = "官方";
                        res.data[i].is_talent = false;
                    } else if (type == "SELF") {
                        res.data[i].type = "自运营";
                        res.data[i].is_talent = false;
                    } else if (type == "AWEME_COOPERATOR") {
                        res.data[i].type = "合作达人";
                        res.data[i].is_talent = true;
                    } else if (type == "DOU_SHOP_LIVE_SELF") {
                        res.data[i].type = "抖店自播";
                        res.data[i].is_talent = true;
                    }
                }
                this.dataForm.tableData[index].anchorList = res.data;
                this.sessionSave();
            }
        },

        // 筛选
        filteredData(query, list, id, name) {
            var list = list,
                query = query;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name) {
                    if (item[id] == query || item[name].indexOf(query) !== -1) {
                        return item;
                    }
                }
            });
            return list;
        },

        // 上一步
        preStep() {
            this.dataForm.step = 1;
            this.sessionSave();
        },

        // 取消创建
        cancelCreation() {
            this.$confirm("是否取消？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    sessionStorage.removeItem("dataForm");
                    this.$parent.dataForm = JSON.parse(
                        JSON.stringify(this.$parent.resetForm)
                    );
                })
                .catch(() => {});
        },

        // 选择账户
        selectAdver(index, item) {
            if (
                this.dataForm.tableData[index].hasAdver.advertiser_id ==
                item.advertiser_id
            ) {
                return;
            } else {
                let creatList = this.dataForm.createform.creatinfo_list;
                for (let i in creatList) {
                    for (let a in creatList[i].creative) {
                        if (
                            creatList[i].creative[a].material.material_source ==
                            "OTHER"
                        ) {
                            this.$message.warning(
                                "不同账户的千川视频已经清空！"
                            );
                            this.dataForm.createform.creatinfo_list = [
                                {
                                    model_name: "创意组1",
                                    creative: [],
                                },
                            ];
                            this.dataForm.createform.creatinfo_active = 0;
                            break;
                        }
                    }
                }
                this.dataForm.tableData[index].hasAdver = item;
                this.dataForm.tableData[index].hasShop = {};
                this.getGroupList(item.advertiser_id, index);
                this.getAchorList(item.advertiser_id, index);
                this.sessionSave();
            }
        },

        // 选择广告组
        selectGroup(index, item) {
            this.dataForm.tableData[index].hasGroup = item;
            this.sessionSave();
        },

        //选择抖音号
        selectAchor(index, item) {
            this.dataForm.tableData[index].hasAchor = item;
            this.sessionSave();
        },

        // 选择商品
        choiceShop(index, item) {
            const attr = {
                index: index,
                advertiser_id: item.hasAdver.advertiser_id,
                hasCheck: item.hasShop.product_id,
                dialogVsb: true,
            };
            this.$bus.emit("choiceShop", attr);
        },

        // 添加账户
        addList() {
            this.dataForm.tableData.push({
                groupList: [],
                anchorList: [],
                hasAdver: {},
                hasGroup: {},
                hasAchor: {},
                hasShop: {},
            });
            this.sessionSave();
        },

        // 删除账户
        deletList(index) {
            if (this.dataForm.tableData.length == 1) {
                return;
            } else {
                this.dataForm.tableData.splice(index, 1);
                this.sessionSave();
            }
        },

        // 关闭筛选清除
        clearQuery(val, index, query) {
            if (!val) {
                this.dataForm.tableData[index][query] = "";
                this.sessionSave();
            }
        },

        sessionSave() {
            window.sessionStorage.setItem(
                "dataForm",
                JSON.stringify(this.dataForm)
            );
        },
    },
    components: {
        ChoiceShop,
        AddAdverPlan,
    },
};
</script>


<style scoped>
.adver_box {
    padding: 20px;
    overflow: auto;
}
.create_footer {
    padding: 20px;
    text-align: right;
    box-shadow: 0px -2px 11px rgba(213, 210, 210, 0.23);
}
.base_box {
    height: 80px;
    border: 1px solid #dcdee2;
    border-radius: 2px;
    padding: 0 16px;
    cursor: pointer;
}
.adver_disabled {
    background-color: #fbfbfc;
    cursor: not-allowed;
}
.min_box {
    min-width: 0;
}
.base_text {
    font-size: 14px;
    color: #b4b7bd;
}
.base_name {
    font-size: 14px;
    color: #17233d;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
}
.base_id {
    font-size: 14px;
    color: #b4b7bd;
    height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 22px;
    margin-top: 3px;
}
.add_shop {
    font-size: 20px;
    margin-right: 10px;
}
.adver_menu {
    width: 360px;
    padding: 10px 20px;
}
.adver_list {
    margin: 12px -20px 0 -20px;
    padding: 0 20px;
    max-height: 420px;
    overflow: auto;
}
.adver_item {
    height: 63px;
    border: 1px solid #dcdee2;
    border-radius: 2px;
    padding: 0 16px;
    cursor: pointer;
    margin-bottom: 12px;
    position: relative;
}
.adver_check {
    position: absolute;
    right: 0;
    top: 0;
    display: none;
}
.adver_item.active {
    background-color: rgba(68, 117, 255, 0.05);
    border: 1px solid #4475ff;
}
.adver_item.active .adver_check {
    display: block;
}
.adver_content {
    height: 100%;
}
.adver_name {
    font-size: 14px;
    color: #17233d;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.adver_id {
    font-size: 14px;
    line-height: 22px;
    height: 22px;
    color: #b4b7bd;
    margin-top: 3px;
}
.adver_status {
    font-size: 12px;
    color: #fe6262;
    line-height: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 2px;
    background: rgba(254, 98, 98, 0.05);
}
.anchor_img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
}
.shop_img {
    width: 56px;
    height: 56px;
}
.anchor_info {
    flex: 1;
    min-width: 0;
    margin-left: 12px;
}
.add_list {
    font-size: 14px;
    color: #4475ff;
    line-height: 40px;
    height: 40px;
    width: 160px;
    text-align: center;
    border-radius: 2px;
    background: rgba(165, 177, 209, 0.08);
    cursor: pointer;
    margin: 10px auto 0;
}
.add_list:hover {
    background: rgba(165, 177, 209, 0.2);
}
</style>

<style>
.adver_table.el-table td,
.adver_table.el-table th.is-leaf {
    border-bottom: 0;
}
.com_table.adver_table.el-table td {
    padding: 10px 0;
}
.adver_table.el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #fff;
}
.adver_drop {
    display: block !important;
}
.adver_dropdown {
    padding: 0 !important;
}
</style>
